<template>
    <div class="showBox" >
      <div class="img-box_img2">
        <!-- <div :key="index" v-for="(item, index) in dev">
          <span :style="'position: absolute;border:1px solid rgb(108, 163, 37); left:'+item.left+'px;top:'+item.top+'px;'">  {{ item.val }} </span>
        </div> -->
        <div class="no-print" style="text-align: right">
            <a-button v-print="'#printContent'" ghost type="primary">打印</a-button>
        </div>
        <section ref="print" id="printContent">       
          <div style="font-size:20px;">
            <span :style="'position: absolute;left:'+190+'px;top:'+140+'px;'">  {{printBillData.serialNum}} </span>
            <span :style="'position: absolute;left:490px;top:140px;'">  {{printBillData.printData}} </span>
            <span :style="'position: absolute;left:810px;top:140px;'">  {{printBillData.billCode}} </span>            
          </div>
          <div style="font-size:18px;">
            <span :style="'position: absolute;left:170px;top:190px;'">   {{printBillData.cusCode}} </span>       
            <span :style="'position: absolute;left:520px;top:190px;'">   {{printBillData.cusName}} </span>
          </div>
          <div style="font-size:18px;">
            <span :style="'position: absolute;left:'+166+'px;top:'+230+'px;'">  {{printBillData.cusAddr}} </span>
            <span :style="'position: absolute;left:760px;top:230px;'">     {{printBillData.cusPhone}} </span>       
          </div>

           <div style="font-size:18px;font-weight:600">
            <span :style="'position: absolute;left:'+90+'px;top:'+290+'px;'">  用户编号 </span>
            <span :style="'position: absolute;left:190px;top:290px;'">  上次抄数 </span>       
            <span :style="'position: absolute;left:290px;top:290px;'">  本次抄数 </span>       
            <span :style="'position: absolute;left:390px;top:290px;'">  抄表月份 </span>       
            <span :style="'position: absolute;left:490px;top:290px;'">  水量 </span>       
            <span :style="'position: absolute;left:590px;top:290px;'">  水费 </span>       
            <span :style="'position: absolute;left:690px;top:290px;'">  其他费用 </span>       
            <span :style="'position: absolute;left:790px;top:290px;'">  违约金 </span>       
            <span :style="'position: absolute;left:890px;top:290px;'">  费用金额 </span>       
          </div> 

         <div style="font-size:18px;font-weight:600"  v-for="(val,index) in printBillData.fees" :key="index" >
            <span :style="'position: absolute;left:100px;top:'+(290 + (index+1)* rowHeight )+'px;'">  {{val.cusCode}} </span>
            <span :style="'position: absolute;left:190px;top:'+(290 + (index+1)* rowHeight ) +'px;'">   {{val.beginScale}}  </span>       
            <span :style="'position: absolute;left:290px;top:'+(290 + (index+1)* rowHeight ) +'px;'">  {{val.endScale}} </span>       
            <span :style="'position: absolute;left:390px;top:'+(290 + (index+1)* rowHeight ) +'px;'">   {{val.readMonth}}  </span>       
            <span :style="'position: absolute;left:390px;top:'+(290 + (index+1)* rowHeight ) +'px;'">   {{val.amount}}  </span>       
            <span :style="'position: absolute;left:490px;top:'+(290 + (index+1)* rowHeight ) +'px;'">   {{val.totalMoney}}  </span>       
            <span :style="'position: absolute;left:590px;top:'+(290 + (index+1)* rowHeight ) +'px;'">   {{val.alienMoney}}  </span>       
            <span :style="'position: absolute;left:690px;top:'+(290 + (index+1)* rowHeight ) +'px;'">   {{val.penalty}}  </span> 
            <span :style="'position: absolute;left:890px;top:'+(290 + (index+1)* rowHeight ) +'px;'">   {{val.money}}  </span>       
          </div> 

          <div style="font-size:18px;font-weight:600">           
            <span :style="'position: absolute;left:190px;top:400px;'">   </span> 
            <span :style="'position: absolute;left:690px;top:430px;'">  余额：{{ printBillData.balance}} </span>   
          </div> 

           <div style="font-size:22px;font-weight:600">           
            <span :style="'position: absolute;left:300px;top:500px;'">   {{printBillData.moneyCn}} </span>        
            <span :style="'position: absolute;left:825px;top:500px;'">  {{printBillData.moneyFee}} </span>               

          </div> 
          <div style="font-size:22px;font-weight:600">           
            <span :style="'position: absolute;left:200px;top:590px;'">   {{printBillData.cashier}} </span>        
            <span :style="'position: absolute;left:780px;top:590px;'">  {{printBillData.printData}} </span>   
          </div> 
          
        </section>

      </div>
    </div> 

  <!--</page-layout>-->
</template>
<script>
  import ACol from "ant-design-vue/es/grid/Col";
  import ARow from "ant-design-vue/es/grid/Row";
  import ATextarea from 'ant-design-vue/es/input/TextArea'

  export default {
    components: {
      ATextarea,
      ARow,
      ACol,
    },
    name: 'Printgzsld',
    props: ["printBillData"],   
    data(){
      return {
        columns: [{
        }
        ],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 2 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        rowHeight: 30,
        previewImage: '',
       
        url:{
          loadApplicant:"/sps/register/loadApplicants",
          loadRegisterFiles:"/sps/register/getRegisterFilesConfig",
        }
      }
    },
    created() {
      this.getDate();
      // console.log("printBillData-form",this.printBillData)
    },
    methods: {
      loadData(){

      },
      getDate(){
        // 当前时间

      },
      handleCancel () {
        this.previewVisible = false
      },
     
    }
  }
</script>
<style scoped>
  /*update_begin author:scott date:20191203 for:打印机打印的字体模糊问题 */
  * {
    color: #000000!important;
    -webkit-tap-highlight-color: #000000!important;
  }
  /*update_end author:scott date:20191203 for:打印机打印的字体模糊问题 */

  .explain{
    text-align: left;
    margin-left: 50px;
    color:#000000!important;
  }
  .explain .ant-input,.sign .ant-input{
    font-weight:bolder;
    text-align:center;
    border-left-width:0px!important;
    border-top-width:0px!important;
    border-right-width:0px!important;
  }
  .explain div{
    margin-bottom: 10px;
  }
  /* you can make up upload button and sample style by using stylesheets */
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
  .showBox{
    text-align:center;    
    width:100%;
    height:750px;
  }
  .img-box_img2 {
    margin:0 auto;
    position: relative;
    width:1100px;
    height:700px;  
    background-Size:contain;
    background-Position:center center;
    background: url('~@assets/feeBill.png') no-repeat center/contain; 
  }
</style>